﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Canvas Tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />

<!-- general libraries -->

<!--[if IE]>
<script src="excanvas.js" type="text/javascript"></script>
<![endif]--> 


<script src="jquery.js" type="text/javascript" ></script>   

<script type="text/javascript">

$(window).load(function () 
{ 
	var canvas = document.getElementById("Canvas");
	var ctx = canvas.getContext("2d");
	
	ctx.fillStyle = "#FF0000";
	ctx.fillRect (10, 10, 100, 100);
	
	ctx.fillStyle = "#FFFFFF";
	ctx.fillRect (90, 90, 100, 100);
	
    var backgroundGradient = ctx.createLinearGradient(0, 50, 0,  150);
    backgroundGradient.addColorStop(0,  "rgba(0, 0, 255, 0.9)");
    backgroundGradient.addColorStop(1 , "rgba(0, 0, 255, 0.3)");

	
	ctx.fillStyle = backgroundGradient; // "rgba(0, 0, 255, 0.5)";
	ctx.fillRect (50, 50, 100, 100);
	
	
	ctx.beginPath();
	ctx.moveTo(75,75);
	ctx.lineTo(150,25);
	ctx.lineTo(200,200);
	ctx.fill();

	ctx.beginPath();
	ctx.moveTo(75,25);
	ctx.quadraticCurveTo(25,25,25,62.5);
	ctx.quadraticCurveTo(25,100,50,100);
	ctx.quadraticCurveTo(50,120,30,125);
	ctx.quadraticCurveTo(60,120,65,100);
	ctx.quadraticCurveTo(125,100,125,62.5);
	ctx.quadraticCurveTo(125,25,75,25);
	ctx.fill();

 });
 
 </script>
 
<style>
body
	{
 	background-color:yellow;
 	}
 	
 	.Content
 	{
	 border: 1px red solid;
	 margin: 5px 5px 5px 5px;

	}
}
 
 
 
 </style>
 
</head>

<body>

<div class="Content">
<p>This is the unwrapped DIV with Text</p>
</div>

<div class="Content">
<div style="position:relative;">
<canvas id="Canvas" style="position:absolute; padding: 0 0 0 0;"  class="jbgCanvas" style="width:1000; height:1000;" />
</div> 

<div class="jbgContentDiv" style="width:auto; height:auto; border: 0px transparent solid; display:block; position:relative;">
<p>This is the wrapped content DIV with Text</p>
</div>
</div>





</body>
</html>
